<template>
  <div>
    <div>
      <div @click="clickVisible('jobType')">
        <mt-field label="任务类型"
                  placeholder="请选择任务类型"
                  v-model="jobType.text"
                  readonly>
        </mt-field>
      </div>

      <div @click="clickVisible('carType')">
        <mt-field label="车辆类型"
                  placeholder="请选择车辆类型"
                  v-model="carType.text"
                  readonly>
        </mt-field>
      </div>

      <div>
        <mt-field label="联系人"
                  placeholder="请输入联系人"
                  type="text"
                  v-model="formData.contacts">
        </mt-field>
      </div>

      <div>
        <mt-field label="联系电话"
                  placeholder="请输入联系电话"
                  type="number"
                  v-model="formData.telephone">
        </mt-field>
      </div>

      <div>
        <mt-field label="数量"
                  placeholder="请输入数量"
                  type="text"
                  :attr="{ maxlength: 2 }"
                  v-model="formData.personCount">
        </mt-field>
      </div>

      <div>
        <mt-field label="航班/车次"
                  placeholder="请输入航班/车次"
                  type="text"
                  :attr="{ maxlength: 2 }"
                  v-model="formData.flight">
        </mt-field>
      </div>

      <div>
        <mt-field label="申请单位"
                  placeholder="请输入申请单位"
                  type="textarea"
                  rows="2"
                  v-model="formData.accompanyPerson">
        </mt-field>
      </div>

      <div>
        <mt-field label="公务说明"
                  placeholder="请输入公务说明"
                  type="textarea"
                  rows="2"
                  v-model="formData.workDescription">
        </mt-field>
      </div>

      <div @click="openPicker('startTime')">
        <mt-field label="开始时间"
                  placeholder="请选择开始时间"
                  type="text"
                  v-model="formData.startTimeRes"
                  readonly>
        </mt-field>
      </div>

      <div @click="openPicker('desTime')">
        <mt-field label="结束时间"
                  placeholder="请选择结束时间"
                  type="text"
                  v-model="formData.desTimeRes"
                  readonly>
        </mt-field>
      </div>

      <div>
        <mt-field label="出发地点"
                  placeholder="请输入出发地点"
                  type="text"
                  v-model="formData.startPlace">
        </mt-field>
      </div>

      <div>
        <mt-field label="详细地址"
                  placeholder="请输入出发地点详细地址"
                  type="textarea"
                  v-model="formData.startAddress">
        </mt-field>
      </div>

      <div>
        <mt-field label="目的地点"
                  placeholder="请输入目的地点"
                  type="text"
                  v-model="formData.destination">
        </mt-field>
      </div>

      <div>
        <mt-field label="详细地址"
                  placeholder="请输入目的地点详细地址"
                  type="textarea"
                  v-model="formData.desAddress">
        </mt-field>
      </div>

      <div>
        <mt-field label="备注"
                  placeholder="请输入备注"
                  type="textarea"
                  rows="4"
                  v-model="formData.remark">
        </mt-field>
      </div>

    </div>

    <mt-popup v-model="visible"
              position="bottom"
              :closeOnClickModal="false"
              popup-transition="popup-fade"
              class="popup-w">

      <mt-picker :slots="pickerList"
                 value-key="name"
                 :showToolbar="true"
                 :ref="infoName"
                 :visible-item-count="5">

        <mt-cell title="">
          <mt-button type="primary"
                     size="small"
                     @click="clickPicker(infoName)">确定</mt-button>
        </mt-cell>

      </mt-picker>
    </mt-popup>

    <!-- 日历 -->
    <mt-datetime-picker ref="picker"
                        type="datetime"
                        v-model="pickerValue"
                        @confirm="handleConfirm">
    </mt-datetime-picker>

  </div>
</template>

<script>
import { Field, Popup, Button, Picker, Cell, DatetimePicker, Toast } from 'mint-ui'
import EnumJson from 'common/enumJson'
import ComFetch from 'common/fetch'
import moment from 'moment'
export default {
  name: 'Content',
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Picker.name]: Picker,
    [Cell.name]: Cell,
    [DatetimePicker.name]: DatetimePicker,
    [Toast.name]: Toast
  },
  props: {
  },
  data () {
    return {
      jobType: {// 任务类型
        value: '',
        text: '',
        list: [
          {
            flex: 1,
            values: EnumJson.jobType,
            className: 'slot1',
            textAlign: 'center'
          }
        ]
      },
      carType: {// 任务类型
        value: '',
        text: '',
        list: [
          {
            flex: 1,
            values: EnumJson.carType,
            className: 'slot1',
            textAlign: 'center'
          }
        ]
      },
      infoName: '', // 当前 picker name
      visible: false,
      pickerList: [],
      pickerValue: new Date(),
      dateName: '',
      formData: { // 表单数据
        reviewStatus: 5,
        workInfoId: '',
        workName: '',
        contacts: '',
        telephone: '',
        personCount: '',
        flight: '',
        accompanyPerson: '',
        startTime: '',
        startTimeRes: '',
        desTime: '',
        desTimeRes: '',
        workDescription: '',
        startPlace: '',
        startAddress: '',
        destination: '',
        desAddress: '',
        remark: '',
        startType: 1,
        desType: 1,
        status: 1
      }
    }
  },
  methods: {
    clickVisible (name) { // 根据当前的name 显示对应的popup picker
      this.pickerList = this[name].list
      this.visible = !this.visible
      this.infoName = name
    },
    clickPicker (name) { //
      let pickerObj = this.$refs[name].getValues()[0]
      let thisName = this[name]
      thisName.text = pickerObj.name
      thisName.value = pickerObj.value
      this.visible = false // 根据当前的name 隐藏对应的popup
    },
    openPicker (name) { // 日期控件点击事件
      this.$refs.picker.open()
      this.dateName = name || 'startTime'
    },
    handleConfirm (data) { // 日期控件回调
      let date = moment(data).format('YYYY-MM-DD HH:mm')
      // let res = moment(date).format('X') // 时间戳
      let res2 = Number(moment(date).format('X')) * 1000 // 毫秒级
      let dateRes = this.dateName + 'Res'
      this.formData[dateRes] = date // 实际提交数据
      this.formData[this.dateName] = res2 // 展示数据
    },
    ckickForm () {
      let formObj = this.formData
      // 坐标
      formObj.startLongitude = 1
      formObj.startLatitude = 1
      formObj.desLongitude = 1
      formObj.desLatitude = 1
      formObj.jobType = this.jobType.value
      formObj.carType = this.carType.value

      ComFetch.post('/phone/carJobs/addCarJobs', formObj)
        .then(res => {
          let data = res.data
          if (data.code === 1) {
            Toast({
              message: '提交成功',
              position: 'middle',
              duration: 3000
            })
            this.$router.push('/MyApplication')
          }
        })
        .catch(res => { })
    }
  },
  mounted () {
  }
}
</script>

<style lang="stylus" scoped>
.popup-w
  width: 100%
</style>
